<template>
  <div class="popover-container" @click="togglePopover">
    <slot name="trigger"></slot>
    <div class="popover-content" v-if="isPopoverVisible">
      <div class="arrow"></div>
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch } from 'vue';
import { IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import request from '@/api';

const isPopoverVisible = ref(false);

const togglePopover = () => {
  isPopoverVisible.value = !isPopoverVisible.value;
};
</script>

<style scoped>
.popover-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popover-content {
  display: block;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
  max-width: 200px;
  white-space: nowrap;
  text-align: center;
  top: 100%;
  left: 0;
  margin-top: 5px;
}

.popover-content .arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ccc transparent;
}

.popover-content .arrow::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
</style>
